<script setup>
import { defineProps, watch, ref, onMounted, onUnmounted, nextTick } from 'vue'
const { $anime } = getMDInstance()
const { createTimer } = $anime


const props = defineProps({
    options: { type: Object, default: () => ({}) },
    apiData: { type: Object, default: () => ({}) },
    busStore: { type: Object, default: () => ({}) },
    privateStore: { type: Object, default: () => ({}) },
    ownStore: { type: Object, default: () => ({}) }
})
const currentCount = ref(0)
const targetCount = ref(0) // 目标值
let runApi = false
const text_free_box = ref(null)
const { $runApi } = getMDInstance()

const options = ref(props.options)
// 监听配置项变化
watch(() => props.options, (newValue, oldValue) => {
    options.value = newValue
    targetCount.value = Number(options.value.targetCount) || 0
    if (options.value.apiList && options.value.apiList.length) {
        initData()
    }
}, { deep: true, immediate: true })

// 监听接口数据变化
watch(() => props.apiData, (newValue, oldValue) => {
    if (options.value.apiList && newValue?.url === options.value.apiList) {// 通过接口获取参数
        targetCount.value = newValue.result.data
    }
}, { deep: true })

// 监听公用数据变化
watch(() => props.busStore, (newValue, oldValue) => {
    if (options.value.commonKey && newValue[options.value.commonKey]) {// 通过公共值获取参数
        targetCount.value = newValue[options.value.commonKey]
    }
}, { deep: true })

// 监听私有数据变化
watch(() => props.privateStore, (newValue, oldValue) => {
    if (newValue.number) {// 通过私有值获取参数
        targetCount.value = newValue.number
    }
}, { deep: true })
// 启动计数器
const startCounting = () => {
    createTimer({
        duration: Number(options.value.duration),
        onUpdate: self => {
            let showData = parseInt(self.currentTime / 2000 * targetCount.value)
            if (options.value.interval) {
                showData = showData.toLocaleString('en-US', {
                    minimumFractionDigits: Number(options.value.decimal) || 0,
                    maximumFractionDigits: Number(options.value.decimal) || 0
                });
            } else if (!options.value.interval && Number(options.value.decimal) > 0) {
                showData = showData.toFixed(Number(options.value.decimal))
            }
            currentCount.value = showData
        }
    });
}
watch(targetCount, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        startCounting()
    }
}, { deep: true })
// 只有一个在原先
function initData() {
    let time = null
    if (runApi) {
        return
    }
    runApi = true
    if (options.value.apiList) {
        $runApi({
            url: options.value.apiList,
            ownStore: props.ownStore,// 必填
        });
    }
    time = setTimeout(() => {
        clearTimeout(time)
        runApi = false
        initData()
    }, Number(options.value.intervalTime) || 5000)
}
</script>

<template>
    <div class="text_free" :style="{
        fontSize: options.fontSize,
        fontWeight: options.fontWeight,
        lineHeight: options.lineHeight,
        color: options.textColor,
        textAlign: options.textAlign,
        backgroundColor: options.backgroundColor,
        backgroundImage: options.backgroundImage ? `url(${options.backgroundImage})` : '',
        padding: options.padding,
    }" style="background-size: 100% 100%;">
        <!-- 文字渐变：级兼容 -->
        <div class="text_free_box" ref="text_free_box" :style="{
            backgroundImage: `linear-gradient(${options.backgroundGradient})`,
            backgroundClip: 'text',
            color: 'transparent',
        }" style="-moz-background-clip: text; -webkit-background-clip: text;">
            {{ currentCount }}
        </div>
    </div>
</template>

<style scoped lang="scss">
.text_free_box {
    display: inline;
}
</style>